<script setup>
import { onMounted, reactive, ref } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import propertyApi from '@/api/goods/PropertyApi'
import categoryApi from '@/api/goods/CategoryApi'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false,
  loading: false, // 加载开关
  parentOptions: []
})
// 表单结构
const original = {
  id: '',
  name: '',
  catalogId: 0,
  catalogName: '',
  idx: 0,
  notes: '',
  options: []
}
// 表单数据
const formState = reactive({})
// 表单 处理
const {
  onCancel, InitializeData, onFinish
} = useFormEvent({ state: state, remoteApi: propertyApi, formState: formState, original: original, formRef: formRef })

//向父组件暴露方法和属性
defineExpose({ InitializeData })
// 添加选项
const addItem =() =>{
  formState.options.push('')
}
// 移出选项
const remove = item =>{
  formState.options = formState.options.filter(it=> it!=item)
}

// 加载页时初始化选项等基础数据
onMounted(() => {
  categoryApi.getTreeOptions().then(res => {
    state.parentOptions.push(res.data)
  })
})
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`属性信息`"
    placement="right"
    :width="'50%'"
  >
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10}"
          :scroll-to-first-error="true"
          :validate-on-rule-change="false"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="所属分类" name="catalogId" :label-col="{span:3}"
                :rules="[{ required: true, message: '请选择所属分类' }]">
                <a-tree-select
                  v-model:value="formState.catalogId"
                  placeholder="选择分类" show-search allow-clear
                  tree-default-expand-all
                  :tree-data="state.parentOptions" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="名称" name="name" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入名称!' }]">
                <a-input v-model:value="formState.name" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="排序" name="idx" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入排序!' }]">
                <a-input-number v-model:value="formState.idx" placeholder="排序" :min="0" :max="10" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                <a-textarea v-model:value="formState.notes" show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="列表值" name="options" :label-col="{span:3}" :wrapper-col="{ span: 21}" validate-first="true">
                <a-row :gutter="16" style="background-color: antiquewhite;padding: 5px;margin-bottom: 10px;">
                  <a-col :span="12"> 值 </a-col>
                  <a-col :span="3">
                    <a-button type="dashed" danger ghost size="small" @click="addItem">增加</a-button>
                  </a-col>
                </a-row>
                <a-row v-for="(item, index) in formState.options" :key="index" :gutter="16">
                  <a-col :span="12">
                    <a-form-item :label="`参数值${index}`" :name="['options', index]" :rules="[{ required: true, message: '请输入参数值!' }]">
                      <a-input v-model:value="formState.options[index]" />         
                    </a-form-item>
                  </a-col>
                  <a-col :span="3">
                    <a-popconfirm title="确定要移去吗?" @confirm="remove(item)">
                      <a-button type="dashed"><delete-outlined /></a-button>
                    </a-popconfirm>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="id">
                <a-space wrap>
                  <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                  <a-button size="large" block @click="onCancel">取消</a-button>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-card>
  </a-drawer>
</template>